import React from 'react';
import {connect} from 'dva/index';
import {Button, Form, Input, Modal, Select} from 'antd';
import CurrencySelect from '../../common/CurrencySelect';

const dateFormat = 'YYYY-MM-DD';
const FormItem = Form.Item;
const R = require("ramda");


const feeItemDetail = Form.create()(class FeeItemDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            disabled: false
        }
    }

    handleOpen = (disabled) => {
        this.setState({ open: true, disabled });
    }

    handleCancel = () => {
        this.setState({ open: false });
        this.props.form.resetFields();
    }

    handleConfirm = () => {
        this.props.form.validateFields({ force: true }, (errors, values) => {
            if (errors) return;
            values.id = this.props.feeItem.dataSource && this.props.feeItem.dataSource.id ? this.props.feeItem.dataSource.id : null;
            // values.begindate = R.isNil(values.begindate) || R.isEmpty(values.begindate) ? "" : values.begindate.format(dateFormat);
            // values.enddate = R.isNil(values.enddate) || R.isEmpty(values.enddate) ? "" : values.enddate.format(dateFormat);

            if (!R.equals(R.pick(Object.keys(values), this.props.feeItem.dataSource), values)) {
                this.props.dispatch({
                    type: R.isNil(values.id) ? 'feeItem/addFeeItem' : 'feeItem/updateFeeItem',
                    payload: {
                        ...values,
                        onSuccess: () => {
                            this.handleCancel();
                            if (this.props.refreshList) this.props.refreshList();
                        }
                    }
                })
            } else this.handleCancel();
        });
    }

    render() {
        let dataSource = this.props.feeItem.dataSource ? this.props.feeItem.dataSource : {};
        let formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
        let supplierList = this.props.supplier.supplierList ? this.props.supplier.supplierList : [];


        const { getFieldDecorator } = this.props.form;
        let footer = [
            <Button key="save" size="large" loading={this.props.loading} onClick={this.handleConfirm.bind(this)} style={{ display: this.state.disabled ? 'none' : 'inline-block' }}>保存</Button>,
            <Button key="cancel" size="large" loading={this.props.loading} onClick={this.handleCancel.bind(this, true)}>{this.state.disabled ? "关闭" : "取消"}</Button>
        ];

        return (
            <Modal maskClosable={false} visible={this.state.open} title={"费用项详情"} confirmLoading={this.props.loading} onCancel={this.handleCancel.bind(this)} footer={footer}>
                <Form>
                    <FormItem {...formItemLayout} label="简称" hasFeedback>
                        {getFieldDecorator('code', {
                            rules: [{
                                required: true, message: '请输入简称',
                            }],
                            initialValue: dataSource.code
                        })(
                            <Input disabled={this.state.disabled} maxLength="200" />
                            )}
                    </FormItem>
                    <FormItem {...formItemLayout} label="中文名称" hasFeedback>
                        {getFieldDecorator('name', {
                            rules: [{
                                required: true, message: '请输入中文名称',
                            }],
                            initialValue: dataSource.name
                        })(

                            <Input disabled={this.state.disabled} maxLength="200" />
                            )}
                    </FormItem>
                    <FormItem {...formItemLayout} label="英文名称" hasFeedback>
                        {getFieldDecorator('nameEn', {
                            rules: [{
                                required: true, message: '请输入英文名称',
                            }],
                            initialValue: dataSource.nameEn
                        })(
                            <Input disabled={this.state.disabled} maxLength="200" />
                            )}
                    </FormItem>
                    <FormItem {...formItemLayout} label="费用类型" hasFeedback>
                        {getFieldDecorator('type', {
                            rules: [{
                                required: true, message: '请选择费用类型',
                            }],
                            initialValue: dataSource.type
                        })(
                            <Select disabled={this.state.disabled}>
                                <Select.Option value="1">海运</Select.Option>
                                <Select.Option value="2">报关</Select.Option>
                                <Select.Option value="3">拖车</Select.Option>
                            </Select>
                            )}
                    </FormItem>
                    <FormItem {...formItemLayout} label="币种" hasFeedback>
                        {getFieldDecorator('currency', {
                            rules: [{
                                required: true, message: '请选择币种',
                            }],
                            initialValue: dataSource.currency
                        })(
                            <CurrencySelect disabled={this.state.disabled} />
                            )}
                    </FormItem>
                    <FormItem {...formItemLayout} label="单位" hasFeedback>
                        {getFieldDecorator('unit', {
                            rules: [{
                                required: true, message: '请选择单位',
                            }],
                            initialValue: dataSource.unit
                        })(
                            <Select disabled={this.state.disabled}>
                                <Select.Option value="1">箱</Select.Option>
                                <Select.Option value="2">票</Select.Option>
                            </Select>
                            )}
                    </FormItem>
                </Form >
            </Modal >
        )
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.feeItem, feeItem: state.feeItem, supplier: state.supplier
    };
}

export default connect(mapStateToProps)(feeItemDetail);